import React, { Component } from 'react';
import { Table, Tag, Space } from 'antd';
import styles from './index.less';
import rank1 from '../../img/rank1.png';
import rank2 from '../../img/rank2.png';
import rank3 from '../../img/rank3.png';

export default class ProductRank extends Component {
  componentDidMount() {}

  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'number',
        key: 'number',
        render: text => {
          if (Number(text) === 1) {
            return (
              <div className="rank">
                <span>
                  <img src={rank1} alt="金牌" />
                </span>
                {text}
              </div>
            );
          } else if (Number(text) === 2) {
            return (
              <div className="rank">
                <span>
                  <img src={rank2} alt="银牌" />
                </span>
                {text}
              </div>
            );
          } else if (Number(text) === 3) {
            return (
              <div className="rank">
                <span>
                  <img src={rank3} alt="铜牌" />
                </span>
                {text}
              </div>
            );
          } else {
            return <div className="rank">{text}</div>;
          }
        },
      },
      {
        title: '名称职位',
        dataIndex: 'namePosition',
        key: 'namePosition',
      },
      {
        title: '发电量',
        dataIndex: 'electric',
        key: 'electric',
      },
      {
        title: '个人财产',
        dataIndex: 'personalProperty',
        key: 'personalProperty',
      },
      {
        title: '进场垃圾量',
        dataIndex: 'wasteVolume',
        key: 'wasteVolume',
      },
      {
        title: '工汽量',
        dataIndex: 'steamVolume',
        key: 'steamVolume',
      },
      {
        title: '实际标煤耗',
        dataIndex: 'coalConsumption',
        key: 'coalConsumption',
      },
      {
        title: '吨垃圾个人财产',
        dataIndex: 'garbage',
        key: 'garbage',
      },
      {
        title: '综合评分',
        dataIndex: 'score',
        key: 'score',
      },
    ];
    const data = [
      {
        id: 1,
        number: 1,
        namePosition: 'XX工场',
        electric: 60,
        personalProperty: '',
        wasteVolume: '',
        steamVolume: '',
        coalConsumption: '',
        garbage: '',
        score: 'C',
      },
      {
        id: 2,
        number: 2,
        namePosition: 'XX工场',
        electric: 60,
        personalProperty: '',
        wasteVolume: '',
        steamVolume: '',
        coalConsumption: '',
        garbage: '',
        score: 'C',
      },
      {
        id: 3,
        number: 3,
        namePosition: 'XX工场',
        electric: 60,
        personalProperty: '',
        wasteVolume: '',
        steamVolume: '',
        coalConsumption: '',
        garbage: '',
        score: 'C',
      },
      {
        id: 4,
        number: 4,
        namePosition: 'XX工场',
        electric: 60,
        personalProperty: '',
        wasteVolume: '',
        steamVolume: '',
        coalConsumption: '',
        garbage: '',
        score: 'C',
      },
    ];
    return (
      <div className={styles.root}>
        <Table
          rowClassName={record => {
            if (Number(record.number) === 1) {
              return 'table-row-rank1';
            } else if (Number(record.number) === 2) {
              return 'table-row-rank2';
            } else if (Number(record.number) === 3) {
              return 'table-row-rank3';
            }
          }}
          pagination={{ position: ['none'] }}
          rowKey={data => data.id}
          columns={columns}
          dataSource={data}
        />
      </div>
    );
  }
}
